<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>新增餐饮总账户</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <style>
        .layui-form-label{
            width: 130px;
        }
        @media screen and (max-width: 450px){
            .layui-form-item .layui-input-inline {
                margin-left: 160px;
            }
        }
        .layui-input-block{
            margin-left: 160px;
        }
        /* .addFile{
            width: 100px;
            height: 30px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
            font-size: 12px;
        }
        .addFile:hover {
            border: 1px dashed #f58843;
            background: linear-gradient(316deg,#f58843 0%,#f56643 100%);;
            color: #fff;
        }
        .addFile:hover i {
            color: #fff;
        }
        .addFile i {
            font-size: 14px;
            color: #f5dab0;
            margin-right: 5px;
        }
        .fileUpLoadDiv{
            padding: 0 0 5px 0;
            display: none;
        }
        .fileUpLoadName{
            color: #03A9F4;
        } */
		/* 支付凭证 */
		.addFile{
		    width: 100px;
		    height: 30px;
		    border-radius: 4px;
		    border: 1px dashed #e6e6e6;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    cursor: pointer;
		    color: #666;
		    font-size: 12px;
			margin-top:20px;
		}
		.addFile:hover {
		    border: 1px dashed #f58843;
		    background: linear-gradient(316deg,#f58843 0%,#f56643 100%);;
		    color: #fff;
		}
		.addFile:hover i {
		    color: #fff;
		}
		.addFile i {
		    font-size: 14px;
		    color: #f5dab0;
		    margin-right: 5px;
		}
		.fileList li{
			color:#03A9F4;
		}
		.fileUpLoadName{
			cursor: pointer;
		}
		.fileUpLoadView{
		    cursor: pointer;
		    margin-left:10px;
		    color:#9F9F9F;
		}
		.fileUpLoadView:hover{
			color:#f56643;
		}
    </style>
</head>
<body>
    <div class="maincontainer">
        <blockquote class="layui-elem-quote">
            新增餐饮总账户
            <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
        </blockquote>
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
              <label class="layui-form-label"><span class="redtext marginRight">*</span>账号：</label>
              <div class="layui-input-inline">
                <input type="text" name="account" autocomplete="off" placeholder="请输入账号" class="layui-input" maxlength="20" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span class="redtext marginRight">*</span>密码：</label>
              <div class="layui-input-inline">
                <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" maxlength="20">
              </div>
              <div class="layui-form-mid layui-word-aux">注：6到20位字母或数字</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span class="redtext marginRight">*</span>确认密码：</label>
              <div class="layui-input-inline">
                <input type="password" name="password1" placeholder="请输入确认密码" autocomplete="off" class="layui-input" maxlength="20">
              </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>餐饮总部名称：</label>
                <div class="layui-input-inline">
                  <input type="text" name="foodCompanyAddress" autocomplete="off" placeholder="请输入餐饮总部名称" class="layui-input" maxlength="20">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>法人代表：</label>
                <div class="layui-input-inline">
                  <input type="text" name="legalName" autocomplete="off" placeholder="请输入法人代表" class="layui-input" maxlength="20">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>联系电话：</label>
                <div class="layui-input-inline">
                    <input type="tel" name="telephone" lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input" maxlength="11">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">统一社会信用代码：</label>
                <div class="layui-input-inline">
                  <input type="text" name="organizationCode" autocomplete="off" placeholder="请输入统一社会信用代码" class="layui-input" maxlength="20">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>结账模式：</label>
                <div class="layui-input-inline">
                    <select name="billType" lay-filter="billType">
                        <option value="1">立结</option>
                        <option value="2">记账</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>结账周期：</label>
                <div class="layui-input-inline">
                    <select name="billCycle" lay-filter="billCycle">
                        <option value="7">7天</option>
                        <option value="15">15天</option>
                        <option value="30">一个月</option>
                        <option value="90">一个季度</option>
                        <option value="182">半年</option>
                        <option value="365">一年</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>审核状态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="reviewStatus" value="0" title="待审核" checked="">
                    <input type="radio" name="reviewStatus" value="1" title="审核通过">
                    <input type="radio" name="reviewStatus" value="2" title="审核不通过">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="openStatus" value="1" title="启用" checked="" disabled>
                    <input type="radio" name="openStatus" value="0" title="禁用" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">资质上传：</label>
                <div class="layui-form-mid layui-word-aux">注：只可上传PDF和图片</div>
            </div>
			<div class="layui-form-item">
			    <div class="layui-input-block">
			        <div>
						<ul class="fileList"></ul>
			        </div>
			        <div>
			            <input type="file" accept="application/pdf,image/*" id="fileUpLoad" multiple style="display: none;" name="">
			            <label class="addFile" for="fileUpLoad">
			                <i class="layui-icon layui-icon-upload"></i>上传
			            </label>
			        </div>
			    </div>
			</div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <div class="fileUpLoadDiv">
                        <div class="fileUpLoadName"></div>
                    </div>
                    <div>
                        <input type="file" accept="application/pdf" id="fileUpLoad" multiple style="display: none;" name="">
                        <label class="addFile" for="fileUpLoad">
                            <i class="layui-icon layui-icon-upload"></i>上传
                        </label>
                    </div>
                </div>
            </div> -->
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">确认</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button>
              </div>
            </div>
        </form>
    </div>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form'], function() {
        var http = layui.http,
            form = layui.form;

        // 资质上传
        // var qualificationFiles
        // $('#fileUpLoad').on('change', function () {
        //     var files = $(this).val()
        //     var filename = files.replace(/.*(\/|\\)/, '');
        //     var fileext = (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : '';
        //     //检查文件格式
        //     if(fileext == 'pdf'){
        //         var file = this.files
        //         var formData = new FormData();
        //         formData.append('file', file[0]);
        //         formData.append('fileType', 'file');
        //         formData.append('isFileName', false);
        //         http.upLoad('system/file/upload',formData,function(res){
        //             if(res.code == 200){
        //                 qualificationFiles = res.data
        //                 $('.fileUpLoadDiv').show()
        //                 $('.fileUpLoadName').html(filename)
        //             }else{
        //                 layer.msg(res.msg)
        //             }
        //         })

        //     }else{
        //         layer.msg('只可上传PDF')
        //     }
        // })
		
		// 资质上传
		$('#fileUpLoad').on('change', function () {
			var newFlieArr = [];
			var formData = new FormData();			        
		    var files = this.files;
			if(!files||files.length==0){
				return
			}
			var ifGo = true;
			for(var i=0;i<files.length;i++){
				var newFlie = {};
				var file = files[i];
				newFlie.filename = file.name;        //文件名
				fileext = http.getLaName(file.name);
				if(!http.isAssetType(fileext)){
					ifGo = false
				    layer.msg('只可上传PDF或图片')
					break
				}
                if(!http.verificationPicFile(file,20)){ // 大小判断
                    ifGo = false
                    break
                }
				newFlieArr.push(newFlie);
				formData.append("files", files[i]);
			}
			formData.append("isfileName", false);
			formData.append("fileType", "file");
			if(ifGo){
				http.upLoad('system/file/upload/batch',formData,function(res){
					$('#fileUpLoad').val('')
				    if(res.code == 200){
						var dataList = res.data;
						for(var i=0;i<dataList.length;i++){
							newFlieArr[i].file = dataList[i];
							var html = '<li><span data-url="'+newFlieArr[i].file+'" class="fileUpLoadName">'+newFlieArr[i].filename+'</span><span class="fileUpLoadView">删除</span></li>';
							$('.fileList').append(html);
						}
				    }else{
				        layer.msg(res.msg)
				    }
				})  
			}else{
			}
		})
		// 预览
		$(document).on('click','.fileUpLoadName',function(e){
			var url = e.target.dataset.url
		    window.open(TUrl+url)
		})
		// 删除
		$(document).on('click','.fileUpLoadView',function(e){
			$(this).parent().remove()
		})
        
        //监听提交
        form.on('submit(demo1)', function(data){
            var fileArr = []
            if($.trim(data.field.account) == "") {
                layer.msg('请输入账号')
                return
            }
            if($.trim(data.field.password) == "") {
                layer.msg('请输入密码')
                return
            }
            if(!/^[0-9a-zA-Z]{6,20}$/.test(data.field.password)){
                layer.msg('密码不规范')
                return
            }
            if(data.field.password != data.field.password1){
                layer.msg('密码不一致')
                return
            }
            if($.trim(data.field.foodCompanyAddress) == "") {
                layer.msg('请输入餐饮总部名称')
                return
            }
            if($.trim(data.field.legalName) == "") {
                layer.msg('请输入法人代表')
                return
            }
            if($.trim(data.field.telephone) == "") {
                layer.msg('请输入联系电话')
                return
            }
            if(!/^1[345789]\d{9}$/.test(data.field.telephone)){
                layer.msg('手机号不规范')
                return
            }
            if($.trim(data.field.organizationCode) == "") {
                layer.msg('请输入统一社会信用代码')
                return
            }
			
			// 资质
			var qualificationFiles = [];
			$(".fileList").find("li").each(function(){
				var list = {
					file:$(this).find("span").eq(0)[0].dataset.url,
					filename:$(this).find("span").eq(0).html()
				};
				qualificationFiles.push(list);
			});
			
            // if($.trim(qualificationFiles) == "") {
            //     layer.msg('请上传资质')
            //     return
            // }
            // var fileArrObj = {
            //     filename: $('.fileUpLoadName').html(),
            //     file: qualificationFiles
            // }
            // fileArr.push(fileArrObj)

            http.post('admin/food/manager/add',{
                account: $.trim(data.field.account),
                password: data.field.password,
                foodCompanyAddress: data.field.foodCompanyAddress,
                legalName: data.field.legalName,
                telephone: data.field.telephone,
                organizationCode: data.field.organizationCode,
                billType: data.field.billType,
                billCycle: data.field.billCycle,
                reviewStatus: data.field.reviewStatus,
                openStatus: data.field.openStatus,
                qualificationFiles: JSON.stringify(qualificationFiles)
            },function(res){
                if(res.code == 200){
                    layer.msg('操作成功')
                    setTimeout(function(){
                        window.history.back()
                    },500)
                }else{
                    layer.msg(res.msg)
                }
            })
            
        });
		
		// 失焦验证密码
		$("input[name=password]").blur(function(e){
			let password1 = $('input[name=password1]').val();
			http.verifPwd($(this).val(),password1,1);
		}) 
		$("input[name=password1]").blur(function(e){
			let password = $('input[name=password]').val();
			http.verifPwd(password,$(this).val(),2);
		}) 
    })
</script>
</body>
</html>